<template>
  <div v-if="!!props.batchSelected" class="merak-table-batch">
    <template v-if="!!props.batches?.length">
      <el-dropdown popper-class="merak-table-dropdown" trigger="click" @command="command => emit('change', command)">
        <el-button type="primary" size="small" plain>{{ $t("merak.batch_edit") }}</el-button>
        <template #dropdown>
          <el-dropdown-menu v-loading="!!props.loading">
            <template v-for="batch in props.batches">
              <el-dropdown-item
                v-if="!!batch.visible ? !!batch.visible?.() : true"
                :command="batch.type"
                :icon="batch.icon"
                :divided="batch.divided"
                :disabled="batch.disabled?.()"
                :style="{ color: batch.color }"
              >
                {{ typeof batch.text === "string" ? batch.text : batch.text?.() }}
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
    <div class="merak-table-batch--selection">
      <span>{{ $t("merak.selected") }}</span>
      <span>&nbsp;{{ props.batchSelected }}&nbsp;</span>
      <span>{{ $t("merak.item") }}</span>
      <el-button size="small" text @click="emit('cancel')">
        {{ $t("merak.cancel") }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MerakXTableDropdown } from "./index";

import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton } from "element-plus";

const props = defineProps<{
  batchSelected: number;
  batches: MerakXTableDropdown[];
  loading?: boolean;
}>();

const emit = defineEmits<{
  cancel: [];
  change: [type: string];
}>();
</script>
